<style lang="scss" scoped>
.personal_information {
  background-color: #fff;
  width: 100vw;
  .upImg {
    position: relative;
    .img {
      opacity: 1;
      position: relative;
      right: 20px;
    }
    .icon {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right: 0;
    }
    .van-uploader__input {
      margin-left: -10px;
    }
  }
}
</style>
<template>
  <div class="personal_information">
    <!-- 个人信息 -->
    <van-nav-bar title="个人信息" left-arrow @click-left="$router.push('/')" />
    <div class="menu_list">
      <van-cell size="large" is-link center title="头像">
        <template #right-icon>
          <van-uploader
            class="upImg"
            :after-read="afterRead"
            :max-size="1024 * 1024"
            @oversize="onOversize"
          >
            <van-image
              round
              class="img"
              width="40"
              height="40"
              :src="$baseURL + $store.state.userInfo.head_photo"
            />
            <van-icon class="icon" size="18px" color="#9699A6" name="arrow" />
          </van-uploader>
        </template>
      </van-cell>
      <van-cell
        size="large"
        title="昵称/单位"
        is-link
        :value="
          $store.state.userInfo.name ? $store.state.userInfo.name : '去设置'
        "
        to="setun"
      />
      <van-cell
        size="large"
        title="性别"
        is-link
        :value="
          $store.state.userInfo.sex==1?'男': $store.state.userInfo.sex==2?'女': '去设置'
        "
        @click="selectSexBool = true"
      />
      <van-cell
        size="large"
        title="手机号"
        to="setp"
        is-link
        :value="$store.getters.filterPhone"
      />
      <van-cell
        size="large"
        title="绑定支付"
        is-link
        value="去设置"
        to="setpay"
      />
    </div>
    <!-- 弹出层，选择性别 -->
    <van-popup v-model="selectSexBool" round :style="{ width: '60%' }">
      <van-picker :columns="columnsSex" @change="onChange" />
    </van-popup>
  </div>
</template>

<script>
import { upDatePhoto , updateSex} from "../api/user";
import { Toast } from "vant";
export default {
  data: () => ({
    selectSexBool: false,
    columnsSex: ["男", "女"],
    // userPhoto:'https://img.yzcdn.cn/vant/cat.jpeg'
  }),
  created() {
    this.init();
  },
  methods: {
    onOversize(file) {
      console.log(file);
      Toast("文件大小不能超过 1mb");
    },
    async afterRead(file) {
      file.status = "uploading";
      file.message = "上传中...";
      let params = new FormData();
      let id = 1;
      params.append("file", file.file);
      params.append("ID", id);
      let data = await upDatePhoto(params);
      file.status = "done ";
      file.message = "上传成功";
      this.$store.commit("setUserHeadPhoto", data.data.msg);
      Toast.success("更改成功!");
    },
    async onChange(picker, value, index) {
      this.selectSexBool = false;
      // console.log(picker);
      Toast(`当前值：${value}, 当前索引：${index + 1}`);
      let return_msg = await updateSex({sex:index+1});
      console.log(return_msg);
      this.$store.commit("setUserSex", index + 1);
    },
    init() {
      this.selectSexTxt = this.$store.state.userInfo.sex;
    },
  },
};
</script>